<template>
  <div>
    <a-modal
      :visible="true"
      :title="title"
      width="511px"
      destroyOnClose
      @cancel="handleCancel"
    >
      <a-form
        ref="formRef"
        :rules="rules"
        :model="formState"
        name="basic"
        autocomplete="off"
      >
        <a-form-item label="名称" name="itemName">
          <a-input
            v-model:value="formState.itemName"
            placeholder="请输入名称"
            :maxlength="30"
          />
        </a-form-item>
        <a-form-item label="编码" name="itemCode">
          <a-input
            v-model:value="formState.itemCode"
            :disabled="action === 'update'"
            placeholder="请输入编码"
            :maxlength="10"
          />
        </a-form-item>
        <a-form-item label="类型" name="itemType">
          <a-radio-group v-model:value="formState.itemType">
            <a-radio :value="2">应发</a-radio>
            <a-radio :value="3">扣款</a-radio>
            <a-radio :value="1">其他</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm" class="sureBtn"
          >确定</a-button
        >
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed, ref } from "vue";
import { message } from "ant-design-vue";
import type { FormInstance } from "ant-design-vue";
import { DIGITAL_ENGLISH } from "@/utils/regex";
const props = defineProps({
  // 是添加/还是编辑
  action: {
    type: String,
    default: "",
  },
  // 初始化表单数据
  record: {
    type: Object,
    default: () => ({}),
  },
  // 数据项列表
  dataSource: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits({
  handleConfirm: null,
  handleCancel: null,
});
const formRef = ref<FormInstance>();
const rules = reactive({
  itemName: [
    {
      required: true,
      message: "请输入名称",
    },
  ],
  itemCode: [
    {
      required: true,
      message: "请输入编码",
    },
    {
      pattern: DIGITAL_ENGLISH,
      message: "编码格式只支持数字和字母",
    },
  ],
  itemType: [
    {
      required: true,
      message: "请选择类型",
    },
  ],
});
const formState = reactive({
  ...props.record,
});
// 弹框title
const title = computed(() => {
  return props.action === "create" ? "添加工资数据项" : "编辑工资数据项";
});
// 确认
const handleConfirm = () => {
  formRef.value
    ?.validate()
    .then(() => {
      // 判断模版中是否有重复的名称和编码
      const hasRecord = props.dataSource.some((item: any) => {
        let isRepeat = false;
        // 添加数据项的时候名称和编码都要验证是否重复
        // 编辑数据项的编码不能编辑，所以只验证名称
        if (props.action === "create") {
          isRepeat =
            item.itemName === formState.itemName ||
            item.itemCode === formState.itemCode;
        } else {
          isRepeat =
            item.itemName === formState.itemName &&
            item.itemCode !== formState.itemCode;
        }
        return isRepeat;
      });
      if (hasRecord) {
        message.warning({
          content: "工资模版中数据项名称和编码不能重复",
        });
      } else {
        const record = {
          ...formState,
          date: props.record.date,
        };
        emits("handleConfirm", record);
      }
    })
    .catch(() => {});
};
// 取消
const handleCancel = () => {
  emits("handleCancel", false);
};
</script>

<style lang="less" scoped>
.sureBtn {
  border-radius: 6px;
  background: #3e77fa;
  border: 1px solid #3e77fa;
  margin-bottom: 14px !important;
}
</style>
